<template>
  <div class="order-nav">
          <van-nav-bar
  title="设置"
  left-text="返回"
  left-arrow
  @click-left="$router.go(-1)"
/>
<div class="content">
   <van-tabs v-model="active">
  <van-tab title="全部">
<van-cell-group>
  <van-cell title="订单号：5465443" value="全部" />
  <div class="right-box" v-for="item in cartList" :key="item.id">
    <div class="left-img">
<img :src="item.url" alt="">
    </div>
 <van-card
  :num="item.num"
  :price="item.price"
 :desc="item.name"
  :src="item.url"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button >取消订单</van-button>
    <van-button>付款</van-button>
  </template>
</van-card>
  </div>
  
</van-cell-group>
    
  </van-tab>
  <van-tab title="代付款">
    <van-cell-group>
  <van-cell title="订单号：5465443" value="代付款" />
  <div class="right-box" v-for="item in rankList" :key="item.id">
    <div class="left-img">
<img :src="item.picture" alt="">
    </div>
 <van-card
  :num="item.num"
  :price="item.price"
 :desc="item.name"
  :src="item.url"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button >取消订单</van-button>
    <van-button>付款</van-button>
  </template>
</van-card>
  </div>
 
  
</van-cell-group>

  </van-tab>
  <van-tab title="代发货">
    <van-cell-group>
  <van-cell title="订单号：5465443" value="待发货" />
   <div class="right-box" v-for="item in snapList" :key="item.id">
    <div class="left-img">
<img :src="item.picture" alt="">
    </div>
 <van-card
  :num="item.num"
  :price="item.price"
 :desc="item.name"
  :src="item.url"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button >取消订单</van-button>
    <van-button>待收货</van-button>
  </template>
</van-card>
  </div>
</van-cell-group>
  </van-tab>
  <van-tab title="待收货">
    <van-cell-group>
  <van-cell title="订单号：5465443" value="待收货" />
   <div class="right-box" v-for="item in cartList" :key="item.id">
    <div class="left-img">
<img :src="item.url" alt="">
    </div>
 <van-card
  :num="item.num"
  :price="item.price"
 :desc="item.name"
  :src="item.url"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button >退货</van-button>
   
     <van-button>确认收货</van-button>
  </template>
</van-card>
  </div>
  
</van-cell-group>
  </van-tab>
   <van-tab title="评价">
    <van-cell-group>
  <van-cell title="订单号：5465443" value="评价" />
   <div class="right-box" v-for="item in cartList" :key="item.id">
    <div class="left-img">
<img :src="item.url" alt="">
    </div>
 <van-card
  :num="item.num"
  :price="item.price"
 :desc="item.name"
  :src="item.url"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button >退货</van-button>
    <van-button>评论</van-button>
  </template>
</van-card>
  </div>
</van-cell-group>
   </van-tab>
</van-tabs>
</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
    computed: {
    cartList() {
      return this.$store.getters.cartList;
    },
    stateAll(){
      return this.$store.getters.stateAll;
    },
    rankList(){
      return this.$store.getters.getRank;
    },
    snapList(){
      return this.$store.getters.getSnap;
    },
    //计算总价
    totalPrice() {
      let total = this.cartList.reduce(
        (prevous, current) => prevous + (current.state? current.price * current.num:0),
        0
      );
      return total * 100;
    },
  },
  // created(){
  // console.log(this.cartList,'》》》》》');
  // }

};
</script>

<style  scoped>
.order-nav{
    height: 100vh;
    background-color: #f2f2f2;
}
.content{
    margin-top: 3px;
    height: 30px;
}
/* .content .van-tab__pane{
    width: 50%;
    height: 200px;
    border: 1px solid #000;
    margin-top: 5px;
} */
.van-button .van-button--default .van-button--mini{
   
    height: 10px;
}
.right-box{
  margin: auto;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}
.left-img{
 
  height: 126px;
 
  
}
.left-img img{

  height: 150px;
    margin:left;
}
.van-card{
  width: 60%;
  height: 150px;
  float: right;

}

</style>